<template>
  <div class="Newdialog">
    <el-dialog
      width="600px"
      title="用户注册"
      style="text-align: center"
      :show-close="false"
      :visible.sync="show"
      @close="closeEvent"
    >
      <el-form class="form" :model="form" :rules="rules" ref="form">
        <!--头像上传-->
        <!-- <el-form-item label="头像" label-width="100px" prop="avatar">
          
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item> -->
        <el-form-item label="头像" prop="avatar" label-width="100px">
          <avatarPic @photo="form.avatar = $event"></avatarPic>
        </el-form-item>

        <!--名字-->
        <el-form-item label="昵称" label-width="100px" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <!--邮箱-->
        <el-form-item label="邮箱" label-width="100px" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>

        <!--手机-->
        <el-form-item label="手机" label-width="100px" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <!--密码-->
        <el-form-item label="密码" label-width="100px" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

        <!--图形码-->

        <el-form-item label="图形码" label-width="100px" prop="code">
          <div class="Newcode">
            <el-input v-model="form.code" class="NewCode"></el-input>
            <img
              :src="url"
              alt=""
              @click="changeimg"
              style="width: 153px"
              class="NewPic"
            />
          </div>
        </el-form-item>

        <!--验证码-->
        <el-form-item label="验证码" label-width="100px" prop="rcode">
          <div class="Newcode">
            <el-input v-model="form.rcode"></el-input>
            <el-button @click="getCode" class="NewButton"
              >获取用户验证码</el-button
            >
          </div>
        </el-form-item>

        <!--确定/取消-->
        <el-form-item>
          <template>
            <div>
              <el-button @click="show = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { PostRegister, PostSendsms } from '@/api/login'
import avatarPic from './avatarPic.vue'
export default {
  components: {
    avatarPic
  },
  created () {
    this.url = this.baseURL + `/captcha?type=sendsms&a=${Date.now()}`
  },
  data () {
    return {
      codeNum: '',
      url: '',
      baseURL: 'http://localhost/heimamm/public',
      show: false,
      form: {
        username: '', // 是	string	用户名
        phone: '', // 是	string	手机号
        email: '', // 是	string	邮箱
        avatar: '', // 是	string	头像地址
        password: '', // 是	string	密码
        rcode: '', // 是	string	验证码
        code: ''
      },
      rules: {
        avatar: [{ required: true, message: '请选择头像', trigger: 'blur' }],
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        phone: [
          { required: true, message: '请输入手机号！', trigger: 'blur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入6-12位密码', trigger: 'blur' },
          {
            pattern: /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/,
            min: 6,
            max: 12,
            message: '密码长度为6-12位,必须是数字加字母',
            trigger: 'blur'
          }
        ],
        code: [{ required: true, message: '请输入图形码', trigger: 'blur' }],
        rcode: [
          { required: true, message: '请输入用户验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getCode () {
      const res = await PostSendsms(this.form)
      console.log('res:', res)
      this.codeNum = res.data.captcha
      this.$message.success(res.data.captcha + '')
    },
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          const res = await PostRegister(this.form)
          console.log(res)
          this.show = false
          this.$message.success('注册成功')
          this.$emit('gologin', {
            phone: this.form.phone,
            psw: this.form.password
          })
        }
      })
    },
    changeimg () {
      this.url = this.baseURL + `/captcha?type=sendsms&a=${Date.now()}`
    },
    closeEvent () {
      this.$refs.form.resetFields()
      this.form = {
        username: '', // 是	string	用户名
        phone: '', // 是	string	手机号
        email: '', // 是	string	邮箱
        avatar: '', // 是	string	头像地址
        password: '', // 是	string	密码
        rcode: '', // 是	string	验证码
        code: ''
      }
    }
  }
}
</script>
<style>
.el-dialog__header {
  background: linear-gradient(90deg, #01c4fa, #1294fa);
}
.el-dialog__title {
  color: #fff;
}
</style>
<style lang="less" scoped>
.Newdialog {
  .form {
    .Newcode {
      display: flex;
      .NewButton,
      .NewPic {
        margin-left: 25px;
      }
    }
  }
}
</style>
